<template>
  <view class="container" @touchmove.stop.prevent="() => {}">
    <view class="u-nav-slot" slot="left" @click="left">
      <u-icon name="arrow-left" color="#000000" size="24" :bold="true"></u-icon>
    </view>
    <image class="bg-c" src="@/static/img/bg-c.png"></image>
    <view class="sign-up-title-c">
      <image
        class="bg1-l"
        src="../../static/img/left.png"
        mode="widthFix"
      ></image>
      <image
        class="bg2-2"
        src="../../static/img/right.png"
        mode="widthFix"
      ></image>
      <view class="sign-up-title-item"> 上传头像 </view>
      <view class="sign-up-title-tips"> 请上传个人真实照片 </view>
    </view>
    <view class="" style="height: 36rpx"> </view>
    <view class="select-c">
      <view class="phone-btn">
        <view class="choose-photo" @click="chooseImg">
          <image
            src="../../static/img/add-photo.png"
            mode="widthFix"
            class="image"
            v-if="falg"
          ></image>
          <image :src="src" v-else class="images" mode="aspectFill"></image>
        </view>
      </view>
    </view>
    <view class="to-btn" @click="stepToNext"> 提交信息 </view>
    <ELM ref="elm" :msg="tipMsg"></ELM>
  </view>
</template>

<script>
import ELM from "@/components/elm-toast/index.vue";
import { addMemberInfo } from "@/api/enroll";
import { userStore } from "@/store/index";
import { useUserStore } from "@/store/user";

export default {
  components: {
    ELM,
  },
  data() {
    return {
      bgColor: "rgba(0, 31, 63, 0)",
      obj: {},
      src: "",
      avatar: "",
      falg: true,
      img: import.meta.env.VITE_BASE_URL,
      tipMsg: "",
    };
  },
  onLoad(options) {
    this.obj = JSON.parse(options.obj);
    console.log(this.obj);
  },
  methods: {
    async stepToNext() {
      const userUserStore = useUserStore();
      if (this.src == "") {
        this.tipMsg = "请上传头像";
        this.$refs.elm.showDialog();
        return;
      }
      const personal = uni.getStorageSync("userInfo");
      let obj = {
        id: personal.id,
        nid: personal.nid,
        avatar: this.avatar,
        nickName: personal.nickName,
      };
      const { code } = await addMemberInfo(obj);
      if (code !== 200) return;
      const user = userStore();
      await userUserStore.useLoginUser();
      if (user.identity !== 0) {
        uni.switchTab({ url: "/Layout/geren" });
      } else {
        uni.switchTab({ url: "/Layout/dongtai" });
      }
    },
    bindChange(val) {
      console.log(val);
    },
    left() {
      uni.navigateBack();
    },
    chooseImg() {
      console.log(this.img);
      const token = uni.getStorageSync("token");
      uni.chooseImage({
        count: 1,
        success: (res) => {
          res.tempFilePaths.forEach((i) => {
            uni.uploadFile({
              url: this.img + "/common/upload",
              filePath: i,
              name: "file",
              header: {
                Authorization: token,
              },
              formData: {
                file: "file",
              },
              success: (res) => {
                let dataing = JSON.parse(res.data);
                this.falg = false;
                this.src = dataing.url;
                this.avatar = dataing.fileName;
              },
              fail: (loginErr) => {
                this.tipMsg = "上传失败，请重试";
                this.$refs.elm.showDialog();
              },
            });
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
.bg-c {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  pointer-events: none;
}

page {
  width: 100%;
  height: 100%;
}

.u-nav-slot {
  margin-bottom: 115rpx;
  padding-left: 20rpx;
  z-index: 100;
}

.container {
  position: relative;
  width: 100vw;
  padding-top: 66rpx;
}

.sign-up-title-c {
  position: relative;
  width: 594rpx;
  height: 200rpx;
  margin: auto;
  margin-top: 52rpx;
  box-sizing: content-box;
  overflow: hidden;
  color: #333;

  .bg1-l {
    position: absolute;
    top: 0rpx;
    left: 0;

    width: 95rpx;
    z-index: -1;
  }

  .bg2-2 {
    position: absolute;
    top: 66rpx;
    right: -10rpx;
    width: 83rpx;
    z-index: -1;
  }

  .sign-up-title-item {
    font-size: 48rpx;
    display: flex;
    align-items: center;
    margin-top: 66rpx;
    justify-content: center;
    font-family: "SourceHanSerifCN-Heavy";

    .yexy {
      margin-left: -20rpx;
      color: rgba(45, 49, 50, 0.9);
    }
  }

  .sign-up-title-tips {
    text-align: center;
    margin-top: 30rpx;
    font-family: "PingFang SC-Regular, PingFang SC";
    font-size: 24rpx;
    font-weight: 400;
    color: #666;
  }
}

.to-btn {
  width: 536rpx;
  height: 84rpx;
  background: linear-gradient(86deg, #c2d2f9 0%, #c5c2f3 100%);
  border-radius: 42rpx 42rpx 42rpx 42rpx;
  text-align: center;
  line-height: 84rpx;
  margin: auto;
  font-family: "PingFang SC-Bold, PingFang SC";
  position: fixed;
  bottom: 15vh;
  color: rgba(65, 92, 158, 0.9);
  font-weight: 400;
  font-size: 28rpx;
  left: 112rpx;
}

.tips {
  margin: auto;
  text-align: center;
  margin-top: 30rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #b7b7b7;
}

.phone-btn {
  width: 560rpx;
  height: 560rpx;
  margin: auto;

  image {
    width: 560rpx;
  }
}

.select-c {
  height: 600rpx;
}

.choose-photo {
  width: 460rpx;
  height: 460rpx;
  margin: auto;
  background: #ffffff;
  border-radius: 32px;
  opacity: 1;
  border: 6px solid #9fb5eb;
  display: flex;
  overflow: hidden;

  .image {
    width: 92rpx;
    margin: auto;
  }

  .images {
    width: 560rpx;
    height: 560rpx;
  }
}
</style>
